<template>
  <div class="invite-success">
    <WeixinHeader :title="$route.meta.title"></WeixinHeader>
    <div class="invite-success__content">
      <img src="@assets/images/weixin/invite-success.png" :alt="$t('all.autotext872')">
      <h2>{{ associated ? $t('all.autotext1444') : $t('all.autotext1401') }}</h2>
      <template v-if="associated">
        <p>{{ $t('all.autotext484') }}</p>
        <p>{{ $t('all.autotext523') }}</p>
      </template>
      <template v-else>
        <!-- <p :title="$route.query.proName">您已成功加入 {{ $route.query.proName }} 项目</p>
        <p :title="$route.query.ptsNo">受试者编号为 {{ $route.query.ptsNo }}</p> -->
        <p :title="$route.query.proName">{{ $t('all.autotext108') }}</p>
        <p :title="$route.query.ptsNo">{{ $t('all.autotext917') }}</p>
      </template>
    </div>
    <div class="invite-success__footer">
      <a-button
        v-if="!associated"
        type="primary"
        size="large"
        @click="associatedToWx"
        :loading="loading"
      >
        {{ $t('all.autotext602') }}
      </a-button>
    </div>
  </div>
</template>

<script>
import WeixinHeader from '@views/weixin/components/weixin-header.vue'
import { apiInviteToWxByCode, anewInviteGuardianCode } from '@api/overview/subject'

export default {
  name: 'invite-success',
  components: {
    WeixinHeader
  },
  data () {
    const associated = this.$route.query.associated || false
    return {
      loading: false,
      associated
    }
  },
  // todo: 全局统一处理无鉴权页面直接在地址栏输入跳转导致的问题
  beforeRouteEnter (to, form, next) {
    if (!to.query.id) {
      next('/403')
    } else {
      next()
    }
  },
  methods: {
    associatedToWx () {
      this.loading = true
      const { id, ptsNo, proId, guardianId, guardianPhone, ptsPhone } = this.$route.query
      // todo： 通过 url 参数来判断是否进行过关联，更好的方式是走后端查询当前受试者状态
      if (ptsPhone) {
        apiInviteToWxByCode({
          id,
          ptsNo,
          proId
        }).then(() => {
          this.associated = true
          this.$router.replace({
            query: Object.assign({}, this.$route.query, { associated: true })
          })
        }).finally(() => {
          this.loading = false
        })
      }

      if (guardianPhone) {
        // 委托人
        anewInviteGuardianCode({
          proId,
          guardianId,
          status: '5'
        }).then(() => {
          this.associated = true
          this.$router.replace({
            query: Object.assign({}, this.$route.query, { associated: true })
          })
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
}
</script>

<style scoped lang='less'>
.invite-success {
  height: 100%;
  background-color: #fff;
  .invite-success__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 50%;
    }
    h2 {
      margin: 24px 0;
    }
    p {
      padding: 0 16px;
      width: 100%;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #999999;
    }
  }
  .invite-success__footer {
    padding: 32px 0;
    text-align: center;
    .ant-btn {
      width: 70%;
      background-color: #263667;
      border-color: #263667;
    }
  }
}
</style>
